<!-- Dom模板 -->
<template>
  <div>
    <ul class="BH_cont">
      <li
        v-for="(item, index) in $store.state.bags.shoucangData"
        :key="index"
        class="BH_ulItem"
      >
        <!-- <div><img src="../../../static/img/v2_qsk67k.png" /></div> -->
        <div><img :src="item.book_img_url" /></div>
        <div>{{ item.bookname }}</div>
        <div>{{item.numbers}}集/{{ item.number }}集</div>
      </li>
       <div v-if="emplay" class="kong">
          <p class="iconfont icon-shoutidai">?</p>
          <p>你还没有收藏的内容哦</p>
        </div>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件

export default {
  data() {
    return {
      msg: "测试",
      dataList:[],
      emplay:false
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    
  },
  mounted() {
        this.$store.dispatch("bags/getUserMsg",{userid:sessionStorage.getItem("userId")})
        if(sessionStorage.getItem("userId")){
            if(this.$store.state.bags.shoucangData.length===0){
                this.emplay = true 
              }else{
                this.emplay = false 
              }
        }
        if(!sessionStorage.getItem("userId")){
            this.emplay = true 
        }
      
      
      // console.log(this.dataList)
  },
  // Vue方法定义
  methods: {
    liClick(item) {
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      this.$store.dispatch("bags/bookItem", item);
     this.$store.commit("bags/getMusicItem",{item,index:item.numbers-1})
      this.$router.history.push({
        path: "/playmusic",
        query: {
          path: this.$route.path,
        },
      });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong{
  width:50%;
  height:250px;
  line-height:50px;
  margin-left:25%;
  margin-top:100px;
}
.kong p:nth-child(1){
  width:50px;
  height:50px;
  border-radius: 50%;
  font-size:35px;
  transform:rotate(-30deg);
  padding-left:60px;
}
.kong p:nth-child(2){
  font-size:16px;
  font-family: PingFangSC-regular;
}
.BH_ulItem {
  width: 2.48rem;
  margin-bottom: 0.4rem;
}
.BH_ulItem > div:nth-child(1) {
  height: 3.2rem;
}
.BH_ulItem > div:nth-child(1) img {
  width: 2.48rem;
  height: 3.2rem;
  border-radius: 0.133333rem;
}
.BH_ulItem > div:nth-child(2) {
  width: 2.373333rem;
  margin-top: 0.213333rem;
  font-size: 0.346667rem;
  font-family: PingFangSC-bold;
  font-weight: 600;
  height: 0.986667rem;
  color: #5c5c5c;
}
.BH_ulItem > div:nth-child(3) {
  color: #999999;
  font-size: 0.266667rem;
  margin-top: 0.08rem;
}
.BH_cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.4rem 0.4rem 3.333333rem;
  overflow-y: auto;
  height: calc(100vh - 6.1244rem);
  justify-content: space-between;
}
</style>